<template>
  <div>
    <h2>列表页面</h2>
    <table>
      <tr>
        <td>id</td>
        <td>名称</td>
        <td>价格</td>
        <td>图片</td>
        <td>操作</td>
      </tr>
      <tr v-for="i in books" :key="i.id">
        <td>{{i.id}}</td>
        <td>{{i.name}}</td>
        <td>{{i.price|yuan}}</td>
        <td>{{i.img}}</td>
        <td>
          <button @click="sub">编辑</button>
          <button @click="delx(i.id)">删除</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data(){
    return{
      books:[],

    }
  },
  mounted(){
    this.uid =sessionStorage.getItem('uid');
    if(!this.uid){
      this.$router.push({
        name:'Login'
      });
      return false;
    }
    this.axios({
      url:'http://127.0.0.1:8000/app01/books/',
      method:'get',
      params:{'id':this.id}
    }).then(res=>{
      this.books=res.data.data;
    })
  },
  methods:{
    delx:function(id){
      let flag=confirm('确认删除吗？')
      if (!flag){
        return false
      }
      let formdata=new FormData();
      formdata.append('id',id);
       this.axios({
        url:'http://127.0.0.1:8000/app01/books/',
        methods:'delete',
        data:formdata
      }).then(res=>{
         this.axios({
        url:'http://127.0.0.1:8000/app01/books/',
        methods:'get',
        params:{'uid':this.uid}
      }).then(res=>{
        this.books=res.data.data;
        }
      })

      })
    }
  },
  filters:{
    yuan:function(val){
      return val+'元'
    }
  }
}
</script>

<style>

</style>
